const RecentAnswer = ({ questions = [] }) => {
  return (
    <div className="space-y-4">
      {questions.map((question, index) => (
        <div
          key={index}
          className="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100"
        >
          <div className="flex items-start gap-4">
            {/* 用户头像 */}
            <img
              src={question.avatar}
              alt="用户头像"
              className="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm"
            />

            {/* 主要内容区域 */}
            <div className="flex-1">
              {/* 标题行 */}
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-lg font-semibold text-gray-800">
                  {question.title}
                </h4>
                <span className="text-sm text-gray-500">
                  {new Date(question.updateTime).toLocaleDateString()}
                </span>
              </div>

              {/* 用户信息与点赞行 */}
              <div className="flex justify-between items-baseline">
                {/* 用户名 */}
                <span className="text-sm font-medium text-blue-600">
                  {question.username}
                </span>

                {/* 点赞信息 */}
                <div className="flex items-center gap-1.5 text-gray-500">
                  <svg
                    className="w-4 h-4 fill-current text-red-400"
                    viewBox="0 0 24 24"
                  >
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                  </svg>
                  <span className="text-sm">{question.likeCount || 0}</span>
                </div>
              </div>

              {/* 问题内容 */}
              <p className="mt-3 text-gray-600 text-sm leading-relaxed line-clamp-2">
                {question.content}
              </p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
export default RecentAnswer;
